<template>
	<view class="content">
		<view class="nav">
			<view class="nav-boxs" :class="[choice == 1 ? '  nav-boxs-active' : '']" @tap="choiceGo(1)">全部<view v-if="choice == 1"></view>
			</view>
			<view class="nav-boxs" :class="[choice == 2 ? '  nav-boxs-active' : '']" @tap="choiceGo(2)">待付款<view v-if="choice == 2"></view>
			</view>
			<view class="nav-boxs" :class="[choice == 3 ? '  nav-boxs-active' : '']" @tap="choiceGo(3)">待发货<view v-if="choice == 3"></view>
			</view>
			<view class="nav-boxs" :class="[choice == 4 ? '  nav-boxs-active' : '']" @tap="choiceGo(4)">待收货<view v-if="choice == 4"></view>
			</view>
			<view class="nav-boxs" :class="[choice == 5 ? '  nav-boxs-active' : '']" @tap="choiceGo(5)">待评价<view v-if="choice == 5"></view>
			</view>
		</view>

		<view class="list">

			<!-- 交易成功 -->
			<view class="list-items">
				<view class="list-items-tittle">
					现代九草
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
					<view class="list-items-type">交易成功</view>
				</view>
				<view class="list-items-area" @tap="goDetail(1)">
					<view class="list-items-goods">
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/wodeshouyi%402x.png"></image>
						<view class="list-items-goods-infos">
							<view class="list-goods-tittle">冬季加厚保暖珊瑚绒四件套双面绒…</view>
							<view class="list-goods-style">蓝色2.0M床单式 被套20…</view>
							<view class="list-toods-price">¥200+100MGT</view>
							<view class="list-goods-tuikuan">退款成功</view>
							<view class="list-goods-num">x1</view>
						</view>
					</view>
					<view class="list-items-goods">
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/wodeshouyi%402x.png"></image>
						<view class="list-items-goods-infos">
							<view class="list-goods-tittle">冬季加厚保暖珊瑚绒四件套双面绒…</view>
							<view class="list-goods-style">蓝色2.0M床单式 被套20…</view>
							<view class="list-toods-price">¥200+100MGT</view>

							<view class="list-goods-num">x1</view>
						</view>
					</view>
					<view class="list-goods-heji">共2件商品 合计：¥400+200MGT</view>
				</view>
				<view class="list-btns">
					<view class="list-btns-btn">再次购买</view>
				</view>
			</view>

			<!-- 待付款 -->
			<view class="list-items">
				<view class="list-items-tittle">
					现代九草
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
					<view class="list-items-type">交易成功</view>
				</view>
				<view class="list-items-area">
					<view class="list-items-goods">
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/wodeshouyi%402x.png"></image>
						<view class="list-items-goods-infos">
							<view class="list-goods-tittle">冬季加厚保暖珊瑚绒四件套双面绒…</view>
							<view class="list-goods-style">蓝色2.0M床单式 被套20…</view>
							<view class="list-toods-price">¥200+100MGT</view>
							<view class="list-goods-num">x1</view>
						</view>
					</view>
					<view class="list-goods-heji">共2件商品 合计：¥400+200MGT</view>
				</view>
				<view class="list-btns">
					<view class="list-btns-btn">再次购买</view>
					<view class="list-btns-btn">评价得MGT</view>
				</view>
			</view>

			<!-- 待付款 -->
			<view class="list-items">
				<view class="list-items-tittle">
					现代九草
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
					<view class="list-items-type">待付款</view>
				</view>
				<view class="list-items-area">
					<view class="list-items-goods">
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/wodeshouyi%402x.png"></image>
						<view class="list-items-goods-infos">
							<view class="list-goods-tittle">冬季加厚保暖珊瑚绒四件套双面绒…</view>
							<view class="list-goods-style">蓝色2.0M床单式 被套20…</view>
							<view class="list-toods-price">¥200+100MGT</view>
							<view class="list-goods-num">x1</view>
						</view>
					</view>
					<view class="list-goods-heji">共2件商品 合计：¥400+200MGT</view>
				</view>
				<view class="list-btns">
					<view class="list-btns-resttime">支付时间还剩<a>23</a>分<a>30</a>秒</view>
					<view class="list-btns-btn" :class="refuse == true ? 'list-btns-btn-gray':''">取消订单</view>
					<view class="list-btns-btn">付款</view>
				</view>
			</view>
			
			<!-- 待收货 -->
			<view class="list-items">
				<view class="list-items-tittle">
					现代九草
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
					<view class="list-items-type">待收货</view>
				</view>
				<view class="list-items-area">
					<view class="list-items-goods">
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/wodeshouyi%402x.png"></image>
						<view class="list-items-goods-infos">
							<view class="list-goods-tittle">冬季加厚保暖珊瑚绒四件套双面绒…</view>
							<view class="list-goods-style">蓝色2.0M床单式 被套20…</view>
							<view class="list-toods-price">¥200+100MGT</view>
							<view class="list-goods-num">x1</view>
						</view>
					</view>
					<view class="list-goods-heji">共2件商品 合计：¥400+200MGT</view>
				</view>
				<view class="list-btns">
					<view class="list-btns-btn">查看物流</view>
					<view class="list-btns-btn">确认收货</view>
				</view>
			</view>
			
			<!-- 交易关闭 -->
			<view class="list-items">
				<view class="list-items-tittle">
					现代九草
					<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/shop_you%402x.png"></image>
					<view class="list-items-type">交易关闭</view>
				</view>
				<view class="list-items-area">
					<view class="list-items-goods">
						<image src="http://hgry.oss-cn-hangzhou.aliyuncs.com/imgs/imgs/wodeshouyi%402x.png"></image>
						<view class="list-items-goods-infos">
							<view class="list-goods-tittle">冬季加厚保暖珊瑚绒四件套双面绒…</view>
							<view class="list-goods-style">蓝色2.0M床单式 被套20…</view>
							<view class="list-toods-price">¥200+100MGT</view>
							<view class="list-goods-num">x1</view>
						</view>
					</view>
					<view class="list-goods-heji">共2件商品 合计：¥400+200MGT</view>
				</view>
				<view class="list-btns">
					<view class="list-btns-btn">重新购买</view>
				</view>
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				choice: 1,
				refuse: true
			}
		},
		onLoad() {

		},
		methods: {
			choiceGo(index) {
				this.choice = index
			},
			goDetail(index) {
				uni.navigateTo({
					url: '../goods-order-detail/goods-order-detail?index='+index
				})
			}
		}
	}
</script>

<style>
	page {
		background: rgba(245, 245, 245, 1);
	}

	.content {
		width: 100%;
		height: 100%;
	}

	.nav {
		width: 100%;
		height: 43.5px;
		display: flex;
		flex-wrap: wrap;
		background: rgba(255, 255, 255, 1);
		border-bottom: 1px solid #EEEEEE;
	}

	.nav-boxs {
		width: 20%;
		height: 43.5px;
		line-height: 43.5px;
		text-align: center;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 45px;
		position: relative;
	}

	.nav-boxs-active {
		font-weight: 500;
		color: rgba(254, 67, 56, 1);
		font-size: 14px;
	}

	.nav-boxs view {
		position: absolute;
		left: 10px;
		right: 10px;
		height: 1px;
		background: rgba(254, 67, 56, 1);
		bottom: 0;
	}

	.list {
		height: 100%;
		padding: 10px;
	}

	.list-items {
		width: 100%;
		height: 100%;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0px 2px 12.5px 0px rgba(153, 153, 153, 0.1);
		border-radius: 5px;
		margin-bottom: 10px;
	}

	.list-items-tittle {
		padding: 10px;
		height: 21px;
		display: flex;
		font-size: 15px;
		line-height: 21px;
		font-family: PingFangSC-Medium, PingFangSC;
		font-weight: 500;
		color: rgba(51, 51, 51, 1);
		position: relative;
	}

	.list-items-tittle image {
		width: 5px;
		height: 9px;
		margin: 6px 10px;
	}

	.list-items-type {
		position: absolute;
		right: 10px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.list-items-area {
		width: 100%;
		height: 100%;
		border-bottom: rgba(238, 238, 238, 1) 1px solid;
	}

	.list-items-goods {
		height: 77px;
		padding: 0 10px 10px 10px;
		margin-right: 10px;
		display: flex;
		flex-wrap: wrap;
		position: relative;
	}

	.list-items-goods image {
		width: 77px;
		height: 77px;
	}

	.list-items-goods-infos {
		padding-left: 6px;
	}

	.list-goods-tittle {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		height: 16.5px;
		line-height: 16.5px;
	}

	.list-goods-style {
		height: 15px;
		line-height: 15px;
		padding-top: 2px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(102, 102, 102, 1);
	}

	.list-toods-price {
		height: 18px;
		line-height: 18px;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		padding-top: 10px;
	}

	.list-goods-num {
		position: absolute;
		top: 0;
		right: 0;
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		height: 18px;
		line-height: 18px;
	}

	.list-goods-tuikuan {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 16.5px;
		position: absolute;
		right: 0;
	}

	.list-goods-heji {
		height: 25px;
		font-size: 11px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		line-height: 15px;
		text-align: right;
		padding-right: 10px;
	}

	.list-btns {
		height: 26px;
		padding: 11px;
		display: flex;
		justify-content: flex-end;
	}

	.list-btns-btn {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(255, 97, 14, 1);
		line-height: 24px;
		border-radius: 30px;
		border: 1px solid rgba(255, 97, 14, 1);
		height: 24px;
		width: 75px;
		text-align: center;
		margin-left: 10px;
	}

	.list-btns-btn-gray {
		border: 1px solid rgba(153, 153, 153, 1);
		color: rgba(102, 102, 102, 1);
	}

	.list-btns-resttime {
		font-size: 12px;
		font-family: PingFangSC-Regular, PingFangSC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
		position: absolute;
		left: 18px;
		line-height: 24px;
	}
	
	.list-btns-resttime a {
		color: #FF3B30;
	}
</style>
